@charset "utf-8";
@import "reset";
@import "global";
@import "skin";
@import "img-icon";

$tab_min_width : 800px;
$tab_min_height : 300px;

@if true{
    skin{
        skin:skin_init(blue);//初始化皮肤样式
    }
}

html{
    @include wh();
    body{
        @include wh();
        background-color: $bg_color;
    }
}
div{
    color: white;
    &.index-title{
        height:50px;
        background-color: $index_title_bg;
        min-width: $tab_min_width;
        div.title-left{
            @include wh(auto,100%);
            float:left;
            li{
                float: left;
                @extend %listnone;
                &.logo-img{
                    img{
                        @include wh(40px);
                        @include lrt(4px);
                    }
                }
                &.logo-txt{
                    @include hl(auto,50px);
                    text-indent: 10px;
                    a{
                        text-decoration: none;
                        color: $index_title_left_logo_color;
                        font-size: 20px;
                        font-style: italic;
                        font-weight: 700;
                    }
                }
            }
        }
        div.title-right{
            float:right;
            ul{
                li{
                    @extend %listnone;
                    float: right;
                    @include hl(auto,50px);
                    font-family: arial;
                    font-size: 14px;
                    margin-right:10px;
                    color: $index_title_right_li_color;
                    a{
                        margin-top:13px;
                        display: block;
                        padding: 12px;
                    }
                    &.user-head{
                        a{
                            margin: 0;
                            display: inline;
                            padding: 0;
                        }
                        img{
                            border-radius: 50%;
                            margin: 6px;
                            @include wh(38px);
                        }
                    }
                }
            }
        }
    }
    &.tab-box{//tab选项卡
        div.tab-title{
            @include wh(100%,40px);
            border-bottom: 2px solid $tab_box_border_bottom_color;
            position: absolute;
            top:0;
            left:0;
            ul{
                margin-left: 3%;
                li{
                    float: left;
                    margin-right: 20px;
                    @extend %listnone;
                    a{
                        display: block;
                        @include hl(40px);
                        text-decoration: none;
                        font-weight: 700;
                        color: $tab_box_a_color;
                        &:hover{
                            color: $tab_box_a_color-hover;
                        }
                    }
                    &:hover{
                        border-bottom: 2px solid $tab_box_a_color-hover;
                    }
                    &.hover{
                        border-bottom: 2px solid $tab_box_border_bottom_color_stop;
                    }
                    &:last-child{
                      margin-right: 0;  
                    }
                } 
            }
        }
        div.tab-content{
            position: absolute;
            top:44px;
            left:0;
            bottom:0;
            width: 100%;
            overflow: auto;
            div.tab-item{
                @include wh();
                display: none;
                float:left;
                position: relative;
                div.tab-move{
                    @include wh();
                    float: left;
                    div.tab-table{
                        float: left;
                        margin:10px;
                        width: 340px;
                        min-height: 280px;
                        div.t-t-bg{
                            float: left;
                            padding: 6px;
                            border-radius: 4px;
                            min-height: 200px;
                            table{
                                tbody{
                                    td{
                                        a{
                                            color: white;
                                            &:hover{
                                                text-decoration: underline;
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                    div.t-d-item{
                        min-height: 100px;
                        min-width: 100px;
                        background: #33C0A0;
                        margin: 10px;
                        float: left;
                        position: relative;
                        cursor: pointer;
                        &:hover{
                            color: #99CCFF;
                        }
                        &.keymove{
                            border-radius: 10px;
                        }
                        p{
                            &.img{
                                img{
                                    @include wh(48px);
                                    margin-left: 26px;
                                    margin-top: 16px;
                                }
                            }
                            &.txt{
                                position: absolute;
                                @include wh(100%,30px);
                                left:0;
                                bottom:0;
                                @include hl(30px);
                                text-align: center;
                                font-weight: 700;
                            }
                        }
                    }
                }
                div.tab-ajax-content{
                    @include wh();
                    position: absolute;
                    top:0;
                    left:0;
                    display: none;    
                }
            }
        }
    }
    &.tab-pagination{
        float: left;
        @include wh(100%,auto);
        span{
            display: block;
            float: left;
            border: 1px solid $tab_pagination_border_color;
            margin:0 4px 2px 0;
            padding: 2px 4px;
            @extend %select_none;
            &:last-child{
                margin-right: 0;
            }
        }
        a{
            @extend span;
        }
    }
    &.double-left{
        position: absolute;
        right: 0;
        top: 150px;
        height:24px;
        width: 20px;
        overflow: hidden;
        div.double-left-bg{
            float: left;
            width: 20px;
            height: 100%;
            background: url(../img/arrow_left1.png) no-repeat;
        }
        &:hover{
            animation: mshow 0.4s forwards;
            -moz-animation: mshow 0.4s forwards; /* Firefox */
            -webkit-animation: mshow 0.4s forwards;  /* Safari 和 Chrome */
            -o-animation: mshow 0.4s forwards;   /* Opera */
        }
        div.double-left-txt{
            float: right;
            width: 24px;
            line-height: 24px;
            height: 100%;
            cursor: pointer;
            background: url(../img/close.png) no-repeat;
            a{
                cursor: pointer;
                text-align: center;
                float: left;
                color: white;
                padding: 12px;
            }
        }
    }
}
@keyframes move80
{
 form{width:0;}
    to{width:80%;}
}

@-moz-keyframes move80 /* Firefox */
{
 form{width:0;}
    to{width:80%;}
}

@-webkit-keyframes move80 /* Safari 和 Chrome */
{
 form{width:0;}
    to{width:80%;}
}

@-o-keyframes move80 /* Opera */
{
 form{width:0;}
    to{width:80%;}
}
@keyframes move100
{
 form{width:auto;}
    to{width:100%;}
}

@-moz-keyframes move100 /* Firefox */
{
 form{width:auto;}
    to{width:100%;}
}

@-webkit-keyframes move100 /* Safari 和 Chrome */
{
 form{width:auto;}
    to{width:100%;}
}

@-o-keyframes move100 /* Opera */
{
 form{width:auto;}
    to{width:100%;}
}
@keyframes mshow
{
 form{width:20px;}
    to{width:50px;}
}

@-moz-keyframes mshow /* Firefox */
{
 form{width:20px;}
    to{width:50px;}
}

@-webkit-keyframes mshow /* Safari 和 Chrome */
{
 form{width:20px;}
    to{width:50px;}
}

@-o-keyframes mshow /* Opera */
{
 form{width:20px;}
 to{width:50px;}
}

/* 简易数据表格-格边框 */
.m-table{float: left; table-layout:fixed;width:100%;line-height:1.5;}
.m-table th,.m-table td{padding:4px;border:1px solid #ddd;}
.m-table th{font-weight:bold;}
/* 简易数据表格-行边框*/
.m-table-row th,.m-table-row td{border-width:0 0 1px;}
.m-table-row td{white-space: nowrap;text-overflow:ellipsis;-o-text-overflow:ellipsis; overflow: hidden; }